<template>
  <el-pagination
    v-model:current-page="page"
    @update:current-page="currentPage"
    small
    background
    layout="slot, prev, pager, next"
    :total="total"
    :page-size="pageSize"
    class="pagination-fd"
  >
    <span
      >共 <span class="sum-text">{{ total }}</span> 条</span
    >
  </el-pagination>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

const page = ref(1)

type Props = {
  total: number
  pageSize?: number
}

withDefaults(defineProps<Props>(), {
  total: 0,
  pageSize: 20
})

const emit = defineEmits<{
  (e: 'page-change', page: number): void
}>()

const currentPage = () => {
  emit('page-change', page.value)
}
</script>

<style lang="scss" scoped>
.pagination-fd {
  position: absolute;
  right: 20px;
  bottom: 12px;
  .sum-text {
    color: $sum-tx;
    font-weight: bold;
    margin: 5px;
  }
}
</style>
